<template>
  <view class="status-page" v-if="status" :class="{ fixed }">

    <view v-if="status === 'empty'">
      <image src="../static/home/noData.png"></image>
      <view class="text">{{ customEmptyText || $t("statusPage.empty") }}</view>
      <button class="btn-primary" @click="$emit('emptyClick')" v-if="customEmptyButtonText">{{ customEmptyButtonText }}</button>
    </view>

    <view v-if="status === 'network'">
      <image src="@/static/home/noData.png"></image>
      <view class="text">{{$t("statusPage.NetworkDisconnection")}}</view>
      <button class="btn-primary" @click="$emit('retry')">{{$t("statusPage.reload")}}</button>
    </view>

    <view v-if="status === 'noSearchResult'">
      <image src="../static/home/noData.png"></image>
      <view class="text">{{customEmptyText || $t("statusPage.NotFound") }}</view>
    </view>

    <view v-if="status === 'noOpen'">
      <image src="/static/statusPage/noOpen.png"></image>
      <view class="text">{{$t("statusPage.StayTuned")}}</view>
    </view>

    <view v-if="status === 'noLogin'">
      <login in-tab></login>
    </view>

    <div class="spinner" v-if="status === 'loading'">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>

  </view>
</template>

<script>

  import Login from '@/components/Login';

  export default {

    name: 'StatusPage',

    components: {
      Login,
    },

    props: {
      status: String,
      emptyImage: String,
      fixed: {
        type: Boolean,
        default: true,
      },
      customEmptyText: String,
      customEmptyButtonText: String,
    },

  };
</script>

<style scoped lang="scss">

  .status-page {
    left: 0;
    top: 0;
    width: 100%;

    text-align: center;
    z-index: 999;

    &.fixed {
      height: 100vh;
      position: fixed;
      background-color: #ffffff;
    }

  }

  image {
    width: 150px;
    height: 150px;
    margin-top: 150px;
  }

  .text {
    font-size:20px;
    color: #AAAAAA;
    line-height:40upx;
    margin-bottom: 30upx;
  }

  button {
    display: inline-block;
    width:240upx;
    height:80upx;
    line-height:80upx;
    border-radius:40upx;
    font-size:24upx;
    color: #6F4405;
  }

  .loader {

  }
  .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    text-align: center;
	display: flex;
  }
  
  .spinner > div {
    width: 24px;
    height: 24px;
    background-color: $uni-text-color-zbt-f;
    margin-right: 8px;
  
    &:last-of-type {
      margin-right: 0;
    }
  
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  
  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  
  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  
  @-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }
  
  @keyframes sk-bouncedelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
      }
  }
  



</style>
